import styles from './styles.less';
import DataTable from './DataTable';
import {useEffect, useState} from 'react';
import {Divider, Modal} from "antd";
import SearchForm from "./SearchForm";
import {connect} from "umi";


const App = (props) => {

  const {dispatch} = props;
  const {users, setUsers} = props.data;
  const [tablePayload, setTablePayload] = useState({pageNum: 1, pageSize: 10, param: {}});

  useEffect(() => {
    if (users) {
      dispatch({
        type: 'CampainCommon/fetchCampainSalerLinkList',
        payload: {campainId: users.data.id}
      });
    } else {
      dispatch({
        type: 'CampainCommon/chgSalerLinkList',
        payload: []
      });
    }
  }, [users]);

  /* 取消操作 */
  function onCancel() {
    setUsers(undefined);
  }

  return (
    <Modal
      title={users ? users.title : ''}
      open={users ? users.visible : false}
      forceRender={true}
      onCancel={onCancel}
      footer={null}
      width={1200}
      bodyStyle={{borderTop: '1px solid #f4f4f4'}}
    >
      <div className={styles.myContainer}>
        <SearchForm data={{tablePayload, setTablePayload}}/>
        <Divider style={{marginTop: 0, marginBottom: 12}}/>
        <DataTable data={{users, tablePayload, setTablePayload}}/>
      </div>
    </Modal>
  );
};

export default connect(() => {
  return {};
})(App);
